/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
async function pindao() {
  const result = await axios({ url: '/v1_0/channels' })
  // console.log(result);
  const data = result.data.channels.map(item => {
    return `  <option value="${item.id}">${item.name}</option>`
  }).join('')
  // console.log(data);
  document.querySelector('.form-select').innerHTML = `<option value="" selected="">请选择文章频道</option>`
    + data
}
pindao()

const chaxun = {
  status: '',
  channel_id: '',
  page: '1',
  per_page: '2'
}
let zongshu = ''
//服务器反馈过来的总条数
async function fuyong() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: chaxun
  })
  console.log(res);

  const String = res.data.results.map(item => {
    return `

    <td>
    <img src=${item.cover.images[0]}>
  </td>
  <td>${item.title}</td>
  <td>
    ${item.status === 1 ? `<span class="badge text-bg-success">待审核</span>` :
        `<span class="badge text-bg-primary">审核通过</span>`}
  </td>
  <td>
    <span>${item.pubdate}</span>
  </td>
  <td>
    <span>${item.read_count}</span>
  </td>
  <td>
    <span>${item.comment_count}</span>
  </td>
  <td>
    <span>${item.like_count}</span>
  </td>
  <td>
    <i class="bi bi-pencil-square edit"></i>
    <i class="bi bi-trash3 del" data-id=${item.id}></i>
  </td>
</tr>
    `
  }).join('')
  document.querySelector('.align-middle').innerHTML = String
  zongshu = res.data.total_count
  document.querySelector('.total-count').innerHTML = `共 ${res.data.total_count} 条`
}
fuyong()
/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */

document.querySelectorAll('.form-check-input').forEach(item => {
  item.addEventListener('change', e => {
    chaxun.status = e.target.value
  })
})
document.querySelector('.form-select').addEventListener('change', e => {
  chaxun.channel_id = e.target.value
})
document.querySelector('.sel-btn').addEventListener('click', async () => {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: chaxun
  })
  fuyong()
  console.log(res);
})
/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector('.next').addEventListener('click', () => {
  if (chaxun.page < Math.ceil(zongshu / chaxun.per_page)) {
    chaxun.page++
    document.querySelector('.page-now').innerHTML = `第${chaxun.page}页`
    fuyong()
  }
})
document.querySelector('.last').addEventListener('click', () => {
  if (chaxun.page > 1) {
    chaxun.page--
    document.querySelector('.page-now').innerHTML = `第${chaxun.page}页`
    fuyong()
  }
})
//上一页
/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

document.querySelector('.art-list').addEventListener('click', async (e) => {
  if (e.target.classList.contains('del')) {
    if (confirm('确定要删除吗')) {
      const id = e.target.dataset.id
      const res = await axios({
        url: `/v1_0/mp/articles/${id}`,
        method: 'delete'
      })
      const childreen = document.querySelector('.art-list').children
      if (childreen.length === 1 && chaxun.page !== 1) {
        chaxun.page--
        document.querySelector('.page-now').innerHTML = `第${chaxun.page}页`
      }
      fuyong()
    }
  }
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', e => {
  if (e.target.classList.contains('edit')) {
    const id = e.target.nextElementSibling.dataset.id
    location.href = `../publish/index.html?id=${id}`
  }
})
